<template>
  <div class="dv-active-ring-chart" :class="{ 'is-dark': isDark }">
    <svg :width="radius * 2" :height="radius * 2" viewBox="0 0 100 100">
      <defs>
        <linearGradient :id="`ring-gradient-${uid}`" x1="0%" y1="0%" x2="100%" y2="100%">
          <stop offset="0%" :stop-color="color" stop-opacity="1" />
          <stop offset="100%" :stop-color="color" stop-opacity="0.6" />
        </linearGradient>
        
        <filter :id="`glow-${uid}`">
          <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
          <feMerge>
            <feMergeNode in="coloredBlur"/>
            <feMergeNode in="SourceGraphic"/>
          </feMerge>
        </filter>
      </defs>
      
      <!-- 背景圆环 -->
      <circle
        cx="50"
        cy="50"
        :r="ringRadius"
        fill="none"
        :stroke="color"
        :stroke-width="ringWidth"
        :opacity="isDark ? 0.2 : 0.15"
      />
      
      <!-- 进度圆环 -->
      <circle
        cx="50"
        cy="50"
        :r="ringRadius"
        fill="none"
        :stroke="`url(#ring-gradient-${uid})`"
        :stroke-width="isDark ? ringWidth : ringWidth + 1"
        :stroke-dasharray="circumference"
        :stroke-dashoffset="dashOffset"
        stroke-linecap="round"
        transform="rotate(-90 50 50)"
        :filter="isDark ? `url(#glow-${uid})` : ''"
        class="progress-ring"
      />
      
      <!-- 装饰圆点 -->
      <circle
        :cx="dotPosition.x"
        :cy="dotPosition.y"
        r="3"
        :fill="color"
        :filter="isDark ? `url(#glow-${uid})` : ''"
      >
        <animate attributeName="r" values="3;5;3" dur="2s" repeatCount="indefinite" />
      </circle>
      
      <!-- 百分比文字 - 上方 -->
      <text
        x="50"
        y="40"
        text-anchor="middle"
        dominant-baseline="middle"
        :fill="textColor"
        font-size="8"
        font-weight="bold"
        class="value-text"
      >
        {{ displayValue }}%
      </text>
      
      <!-- 标题文字 - 下方 -->
      <text
        x="50"
        y="65"
        text-anchor="middle"
        dominant-baseline="middle"
        :fill="textColor"
        font-size="3.5"
        opacity="0.7"
      >
        {{ title }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue'
import { useSettingsStore } from '@/store'
import { ThemeEnum } from '@/enums/ThemeEnum'

interface Props {
  value: number
  radius?: number
  ringWidth?: number
  color?: string
  title?: string
}

const props = withDefaults(defineProps<Props>(), {
  radius: 60,
  ringWidth: 8,
  title: ''
})

const settingsStore = useSettingsStore()
const isDark = computed(() => settingsStore.theme === ThemeEnum.DARK)

const currentValue = ref(0)
const uid = ref(`ring-${Math.random().toString(36).substr(2, 9)}`)

const color = computed(() => {
  if (props.color) return props.color
  return isDark.value ? '#00d4ff' : '#409eff'
})

const textColor = computed(() => isDark.value ? '#fff' : '#303133')

const ringRadius = computed(() => 50 - props.ringWidth / 2)

const circumference = computed(() => 2 * Math.PI * ringRadius.value)

const dashOffset = computed(() => {
  const progress = currentValue.value / 100
  return circumference.value * (1 - progress)
})

const displayValue = computed(() => Math.round(currentValue.value))

const dotPosition = computed(() => {
  const progress = currentValue.value / 100
  const angle = progress * 2 * Math.PI - Math.PI / 2
  const x = 50 + ringRadius.value * Math.cos(angle)
  const y = 50 + ringRadius.value * Math.sin(angle)
  return { x, y }
})

watch(() => props.value, (newVal) => {
  const start = currentValue.value
  const target = Math.min(Math.max(newVal, 0), 100)
  const duration = 1000
  const startTime = Date.now()
  
  const animate = () => {
    const now = Date.now()
    const progress = Math.min((now - startTime) / duration, 1)
    const easeOut = 1 - Math.pow(1 - progress, 3)
    
    currentValue.value = start + (target - start) * easeOut
    
    if (progress < 1) {
      requestAnimationFrame(animate)
    }
  }
  
  requestAnimationFrame(animate)
}, { immediate: true })
</script>

<style lang="scss" scoped>
.dv-active-ring-chart {
  display: inline-block;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
  
  svg {
    display: block;
    
    .progress-ring {
      transition: stroke-dashoffset 0.3s ease;
    }
    
    .value-text {
      font-family: 'DS-Digital', 'Courier New', monospace;
      font-weight: bold;
    }
  }
  
  &.is-dark {
    filter: drop-shadow(0 0 10px rgba(0, 212, 255, 0.3));
    
    .value-text {
      text-shadow: 0 0 10px currentColor;
    }
  }
}
</style>
